<template lang="html">
<section class="body">
  <div class="wrapper">
    <p id="forget">Don't forget to change your <strong><a href="">City!</a></strong></p>
    <div class="align">
      <div class="app">
        <div id="main">
          <!-- Settings Menu -->
          <div id="introscreen"><img src="https://image.flaticon.com/icons/svg/578/578457.svg" alt=""></div>
          <!-- Settings Button -->
          <span id="btn-right">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </span>
          <!-- Info Message -->
          <div id="info-msg">
            <div class="msg-box">
              <h1></h1>
              <p></p>
            </div>
          </div>
          <!-- Settings -->
          <div id="settings">
            <p id="settings-info"><i class="fa fa-cog" aria-hidden="true"></i> Settings</p>
            <div class="search-container">
              <label for="">
                <input type="text" id="search" placeholder="Search City..." required>
                <i class="fa fa-search" aria-hidden="true"></i>
                <button id="update-button">Update</button>
              </label>
            </div>
            <ul>
              <li>
                <div class="text">
                  <p>Temperature Unit</p>
                </div>
                <label class="switch" for="">
                  <input type="checkbox" id="unit">
                  <div class="slider">
                    <p class="left"><i class="c" aria-hidden="true">°C</i></p>
                    <p class="right"><i class="c" aria-hidden="true">°F</i></p>
                  </div>
                </label>
                <div class="sub-info">Choose between °C or °F.</div>
              </li>
              <li>
                <div class="text">
                  <p>Atmospheric Conditions</p>
                </div>
                <label for="" class="switch">
                  <input type="checkbox" id="atm">
                  <div class="slider">
                    <p class="left"><i class="fa fa-check" aria-hidden="true"></i></p>
                    <p class="right"><i class="fa fa-times" aria-hidden="true"></i></p>
                  </div>
                </label>
                <div class="sub-info">Humidity, pressure and visibility of the atmosphere.</div>
              </li>
              <li>
                <div class="text">
                  <p>Sunrise/Sunset</p>
                </div>
                <label class="switch">
                  <input type="checkbox" id="sun">
                  <div class="slider">
                    <p class="left"><i class="fa fa-check" aria-hidden="true"></i></p>
                    <p class="right"><i class="fa fa-times" aria-hidden="true"></i></p>
                  </div>
                </label>
                <div class="sub-info">Sunset/Sunrise hours and total hours of light.</div>
              </li>
              <li>
                <div class="text">
                  <p>Wind Conditions</p>
                </div>
                <label class="switch">
                  <input type="checkbox" id="wind">
                  <div class="slider">
                    <p class="left"><i class="fa fa-check" aria-hidden="true"></i></p>
                    <p class="right"><i class="fa fa-times" aria-hidden="true"></i></p>
                  </div>
                </label>
                <div class="sub-info">Chill, direction and the speed of the wind.</div>
              </li>
              <li>
                <div class="text">
                  <p>Choose a theme</p>
                  <div class="row">
                    <span class="green"></span>
                    <span class="turqoise"></span>
                    <span class="blue"></span>
                    <span class="purple"></span>
                  </div>
                </div>
                <div class="sub-info">Select the desired theme. Press the "Save" button to update the theme!</div>
              </li>
            </ul>
            <button id="save-button">Save</button>
          </div>
          <!-- Central -->
          <div id="central">
            <div id="top-menu-info">
              <p id="location">
                <i class="fa fa-map-marker" aria-hidden="true"></i>
                <span>Bucharest</span>
              </p>
            </div>
            <div id="temp-div">
              <div id="icon-temp">
                <p>Sunny</p>
                <i class="wi wi-day-cloudy" aria-hidden="true"></i>
              </div>
              <p id="current-temp-big">
                <span id="ctb">17</span>
                <span id="ctbicon">°C</span>
              </p>
            </div>
            <div id="weather-menu">
              <span href="#" id="weather-menu-btn">
                <i class="fa fa-chevron-up" aria-hidden="true"></i>
              </span>
              <ul>
                <li id="atmli">
                  <p class="li_title">Atmospheric Conditions</p>
                  <div id="humidity" class="col-1">
                    <i class="wi wi-humidity" aria-hidden="true"></i>
                    <span>Humidity <br> <span id="hd">NaN</span></span>
                  </div>
                  <div id="pressure" class="col-2">
                    <i class="wi wi-barometer" aria-hidden="true"></i>
                    <span>Pressure <br> <span id="pd">NaN</span></span>
                  </div>
                  <div id="visibility" class="col-3">
                    <i class="wi wi-day-fog" aria-hidden="true"></i>
                    <span>Visibility <br>  <span id="vd">NaN</span></span>
                  </div>
                </li>
                <li id="sunli">
                  <p class="li_title">Sunrise/Sunset</p>
                  <div id="sunrise" class="col-1">
                    <i class="wi wi-sunrise" aria-hidden="true"></i>
                    <span>Sunrise <br> <span id="srd">NaN</span></span>
                  </div>
                  <div id="totallight" class="col-2">
                    <i class="wi wi-time-4" aria-hidden="true"></i>
                    <span>Hours of light<br> <span id="td">NaN</span></span>
                  </div>
                  <div id="sunset" class="col-3">
                    <i class="wi wi-sunset" aria-hidden="true"></i>
                    <span>Sunset <br> <span id="ssd">NaN</span></span>
                  </div>
                </li>
                <li id="windli">
                  <p class="li_title">Wind Conditions</p>
                  <div id="chill" class="col-1">
                    <i class="wi wi-thermometer-exterior
                    " aria-hidden="true"></i>
                    <span>Chill <br> <span id="cd">NaN</span></span>
                  </div>
                  <div id="direction" class="col-2">
                    <i class="wi wi-wind from-270-deg" aria-hidden="true"></i>
                    <span>Direction <br> <span id="dd">NaN</span></span>
                  </div>
                  <div id="speed" class="col-3">
                    <i class="wi wi-strong-wind" aria-hidden="true"></i>
                    <span>Speed <br> <span id="sd">NaN</span></span>
                  </div>
                </li>
                <li id="forecastli">
                  <p class="li_title">9 Days Forecast</p>
                  <span class="day_left">
                    <i class="fa fa-chevron-left" aria-hidden="true"></i>
                  </span>
                  <span class="day_right">
                    <i class="fa fa-chevron-right" aria-hidden="true"></i>
                  </span>
                  <div class="li_row">
                    
                    <div class="col-1 day10item">
                      <i class="wi wi-day-sunny" aria-hidden="true"></i>
                      <span>Mon <br> 20°C</span>
                    </div>
                    <div class="col-2 day10item" >
                      <i class="wi wi-day-cloudy" aria-hidden="true"></i>
                      <span>Tue <br> 22°C</span>
                    </div>
                    <div class="col-3 day10item">
                      <i class="wi wi-day-rain" aria-hidden="true"></i>
                      <span>Wed <br> 15°C</span>
                    </div>
                    
                    <div class="col-1 day10item">
                      <i class="wi wi-day-sunny" aria-hidden="true"></i>
                      <span>Thu <br> 20°C</span>
                    </div>
                    <div class="col-2 day10item" >
                      <i class="wi wi-day-cloudy" aria-hidden="true"></i>
                      <span>Fri <br> 22°C</span>
                    </div>
                    <div class="col-3 day10item">
                      <i class="wi wi-day-rain" aria-hidden="true"></i>
                      <span>Sat <br> 15°C</span>
                    </div>
                    <div class="col-1 day10item">
                      <i class="wi wi-day-sunny" aria-hidden="true"></i>
                      <span>Mon <br> 20°C</span>
                    </div>
                    <div class="col-2 day10item" >
                      <i class="wi wi-day-cloudy" aria-hidden="true"></i>
                      <span>Tue <br> 22°C</span>
                    </div>
                    <div class="col-3 day10item">
                      <i class="wi wi-day-rain" aria-hidden="true"></i>
                      <span>Wed <br> 15°C</span>
                    </div>
                  </div>
                  
                  <div id="dotmenu">
                    <span class="currentday"></span>
                    <span></span>
                    <span></span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <p id="copyright">Made by&nbsp;<strong><a href="https://www.linkedin.com/in/nicolae-stefan-tudoran-b02291127/" target="_blank" rel="noopener">Stefan Tudoran</a></strong></p>
    </div>
  </div>
</section>
</template>
<script>
import 'font-awesome/css/font-awesome.min.css'
export default {
}
</script>
<style lang="scss" scoped>
@mixin user-select($value: none) {
  user-select: $value;
  -moz-user-select: $value;
  -khtml-user-select: $value;
  -webkit-user-select: $value;
  -o-user-select: $value;
}
* {
  margin: 0;
  padding: 0;
}
.body {
  background: #fbfbfb;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-transition: background .75s;
  transition: background .75s;
  &.green {
    background: #71daa3;
    #copyright,
    #forget {
      color: #fff;
      a {
        color: #fff;
      }
    }
  }
  &.purple {
    background: #bf74c0;
    #copyright,
    #forget {
      color: #fff;
      a {
        color: #fff;
      }
    }
  }
  &.blue {
    background: #6eadfd;
    #copyright,
    #forget {
      color: #fff;
      a {
        color: #fff;
      }
    }
  }
  &.turqoise {
    background: #22e2c8;
    #copyright,
    #forget {
      color: #fff;
      a {
        color: #fff;
      }
    }
  }
}
.wrapper {
  width: 100%;
  min-height: 840px;
  .align {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 25px 0;
  }
  .app {
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-perspective: 1000;
    width: 394px;
    min-height: 700px;
    margin: 0 auto;
    box-shadow: 0 14px 20px -5px rgba(0, 0, 0, 0.2);
    border-radius: 22px;
    font-family: sans-serif;
    overflow: hidden;

    $green:linear-gradient(135deg, #c9ef87 -20%, #22ccb7 120%);
    $purple:linear-gradient(135deg, #fd82cc -20%, #704aa2 120%);
    $blue:linear-gradient(135deg, #80ecf7 -20%, #706aff 120%);
    $turqoise:linear-gradient(135deg, #5de2ff -20%, #1ccc88 120%);
    $settings:#f2f2f2;
    $settings-content:#fff;
    $settings-info:#f9f9f9;
    $settings-color:#444;
    $settings-error: linear-gradient(to bottom, rgba(255, 255, 255, 0.97) 0%, rgba(245, 245, 245, 0.97) 100%);

    #main {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 12px;
      background: #444;
      @include user-select(none);

      -webkit-mask-image: url();

      $top-menu-height: 62px;

      #introscreen {
        visibility: visible;
        opacity: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        background: #fff2c2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 9999;
        pointer-events: none;
        @include user-select(none);
        -webkit-transition: 1s;
        transition: 1s;
        -webkit-backface-visibility: hidden;
        text-align:center;
        img {
          height: 300px;
          color: #f5c34f;
          -webkit-transition: 1s; 
          transition: 1s;
        }
        &.sunloading {
          img {
            transform: rotate(90deg) scale(6);
          }
        }
        &.animfin {
          visibility: hidden;
          opacity: 0;
        }
      }
      #btn-right {
        position: absolute;
        width: 26px;
        height: 22px;
        text-align: center;
        text-decoration: none;
        z-index: 5;
        color: #fff;
        span {
          display: block;
          position: absolute;
          opacity: 1;
          background: #fff;
          -webkit-transition: .5s;
          transition: .5s;
        }
      }
    }
  }
}
</style>